<template>
    <div class="repayment-list">
        <el-table
            :data="repaymentTable.data"
            :default-sort="{prop: 'month', order: 'ascending'}"
            border>
            <el-table-column
                label="期数"
                prop="period"
                align="center">
                <template v-slot="{row}">
                    <span v-if="row.period">第{{ row.period }}期</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                label="还款日期"
                prop="date"
                align="center" />
            <el-table-column
                label="应还本金"
                prop="principal"
                header-align="center"
                align="right" />
            <el-table-column
                label="应还利息"
                prop="interest"
                header-align="center"
                align="right" />
            <el-table-column
                label="应还月供"
                prop="amount"
                header-align="center"
                align="right" />
            <el-table-column
                align="center"
                label="年利率(%)"
                prop="yearRate" />
            <el-table-column
                label="剩余本金"
                prop="remaining"
                header-align="center"
                align="right" />
        </el-table>
        <el-pagination
            :current-page="repaymentTable.currentPage"
            :page-size="repaymentTable.pageSize"
            :total="repaymentTable.total"
            layout="prev, pager, next, sizes, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component({})
export default class RepaymentList extends Vue {
    @Prop({
        default: {
            data: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    }) private repaymentTable!: any;
}
</script>

<style lang="scss" scoped>
.repayment-list {
  .el-table {
    width: 100%;
  }
}
</style>
